<template>
  <div class="app-container">
      <el-card shadow="always">
        <div>
           <el-divider>成绩比例设置</el-divider>
          <el-row>
            <el-col :span="4">
          <div>
            <el-progress type="dashboard" :percentage="ResultSetting.percentageA" :color="colors"></el-progress><br>
            平时成绩比例
              <div>
              <el-button-group>
                <el-button icon="el-icon-minus" @click="decreaseA"></el-button>
                <el-button icon="el-icon-plus" @click="increaseA"></el-button>
              </el-button-group>
            </div>
            </div>
            </el-col>
            <el-col :span="4">
          <div>
          <el-progress type="dashboard" :percentage="ResultSetting.percentageB" :color="colors"></el-progress><br>
            中期检查成绩比例
            <div>
              <el-button-group>
                <el-button icon="el-icon-minus" @click="decreaseB"></el-button>
                <el-button icon="el-icon-plus" @click="increaseB"></el-button>
              </el-button-group>
            </div>
            </div>
            </el-col>
            <el-col :span="4">
          <div>
            <el-progress type="dashboard" :percentage="ResultSetting.percentageC" :color="colors"></el-progress><br>
          末期检查成绩比例
          </div>
            </el-col>
            <el-col :span="12">
              <div align="center">
                <div id="myChart" :style="{width: '400px', height: '300px'}">
                </div>
                  <div align="right">
                    <el-popconfirm  @onConfirm ="editResultSetting" title="将影响导出学生的总成绩，确认修改吗？" 
                      >
                      <el-button type="primary" slot="reference" >修改比例</el-button>
                    </el-popconfirm>
                </div>
              </div>
            </el-col>
          </el-row>
           <el-divider>学期设置</el-divider>
          <el-row >
            <el-col  >
              <el-card shadow="always">
                学期设置：
                <el-select v-model="editSemesterParams.semester" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.semesterId"
                    :label="item.semester"
                    :value="item.semester">
                  </el-option>
                </el-select>
                <el-popconfirm  @onConfirm ="editSemesterSetting()" title="确认修改吗？" 
                  >
                  <el-button type="primary" slot="reference" >修改当前系统学期</el-button>
                </el-popconfirm>
                <el-button type="primary" @click="semesterParamsDialog = true" >新建学期</el-button>
                当前学期：{{currentSemester.settingValue}}
              </el-card>
            </el-col>
          </el-row>
          <el-divider>报告模板设置</el-divider>
          <row>
            <div>
              <el-row :gutter="24">
                <el-card shadow="always">
                  <el-col :span="6">
                    周报模板
                    <a :href="reportTemplate.weekTemplate" ><el-button icon="el-icon-download" circle></el-button></a>
                    <el-button icon="el-icon-edit" circle @click="editReport('week')"></el-button>
                  </el-col>
                  <el-col :span="6">
                    月报模板
                    <a :href="reportTemplate.monthTemplate" ><el-button icon="el-icon-download" circle></el-button></a>
                    <el-button icon="el-icon-edit" circle @click="editReport('month')"></el-button>
                  </el-col>
                  <el-col :span="6">
                    中期报告模板
                    <a :href="reportTemplate.centerTemplate" ><el-button icon="el-icon-download" circle></el-button></a>
                    <el-button icon="el-icon-edit" circle @click="editReport('center')"></el-button>
                  </el-col>
                  <el-col :span="6">
                    实训报告模板
                    <a :href="reportTemplate.finalTemplate" ><el-button icon="el-icon-download" circle></el-button></a>
                    <el-button icon="el-icon-edit" circle @click="editReport('final')"></el-button>
                  </el-col>
                </el-card>
               </el-row>
            </div>
          </row>
        </div>
      </el-card>
      <el-dialog
        title="修改报告模板"
        :visible.sync="dialogVisible"
        width="30%">
        <span>{{reportTiele}}</span>
        <el-upload
            class="upload-demo"
            :action="actionUrl"
            :on-success="handleAvatarSuccess"
            :before-remove="beforeRemove"
            :before-upload="beforeAvatarUpload"
            multiple
            :limit="1"
            accept=".doc,.docx">
            <el-button size="small" type="primary" >点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传doc/docx文件，且不超过500kb</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editReportTemplate()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="新建学期"
        :visible.sync="semesterParamsDialog"
        width="30%">
        <el-form :model="choiceParams" class="choiceDialog">
          <el-form-item label="学期" :label-width="formLabelWidth">
            <el-input type="text" v-model="semesterParams.semester" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="学期描述" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="semesterParams.semesterDesc" autocomplete="off" ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="semesterParamsDialog = false">取 消</el-button>
          <el-button type="primary" @click="newSemester()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getResultSetting,editResultSetting ,editReportTemplate,getReportTemplate,editSemesterSetting,getSemesterSetting} from '@/api/setting'
import { newSemester,getSemesterList} from '@/api/semester'
export default {
  data() {
    return {
     actionUrl:process.env.VUE_APP_BASE_UPLOAD,
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        chart: null,
        option:{
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '比例',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 30, name: '平时成绩比例'},
                {value: 30, name: '中期检查成绩'},
                {value: 30, name: '末期检查成绩'}
            ]
        }
    ]
        },
        ResultSetting:{
          percentageA: 30,
          percentageB: 30,
          percentageC: 40,
        },
        options: [],
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        reportTemplate:{
          weekTemplate:'',
          monthTemplate:'',
          centerTemplate:'',
          finalTemplate:''
        },
        dialogVisible: false,
        reportParams:{
          reportType:'',
          fileUrl:''
        },
        reportTiele:'',
        semesterParamsDialog:false,
        semesterParams:{
          semester:'',
          semesterDesc:''
        },
        editSemesterParams:{
          semester:''
        },
        currentSemester:{},
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  //页面打开时执行的方法
  created() {
   this.getResultSetting()
   this.getReportTemplate()
   this.getSemesterSetting()
   this.getSemesterList()
  },
   mounted(){
    this.initChart();
  },
  methods: {
    async editSemesterSetting(){
       await editSemesterSetting(this.editSemesterParams).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.getSemesterSetting()
        }
        ).catch(err => {
          this.$message({
            type: 'error',
            message: '修改失败!'
          })
        })
    },
    async newSemester(){
       await newSemester(this.semesterParams).then(() => {
          this.$message({
            type: 'success',
            message: '新建学期成功!'
          })
          this.getSemesterList()
          this.semesterParamsDialog = false
        }
        ).catch(err => {
          this.$message({
            type: 'error',
            message: '新建学期失败!'
          })
        })
    },
    async getSemesterList(){
       let res = await getSemesterList()
        this.options = res.beans
    },
    async getSemesterSetting(){
       let res = await getSemesterSetting()
        this.currentSemester = res.bean
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('myChart'))
      this.chart.setOption(this.option);
    },
    increaseA() {
      if(this.ResultSetting.percentageA<100){
          this.ResultSetting.percentageA += 10;
          if(this.ResultSetting.percentageC<=0){
              this.ResultSetting.percentageB-=10
          }else{
            this.ResultSetting.percentageC-=10
          }
          this.option.series[0].data[0].value = this.ResultSetting.percentageA
          this.option.series[0].data[1].value = this.ResultSetting.percentageB
          this.option.series[0].data[2].value = this.ResultSetting.percentageC
          this.initChart();
        }
      },
      decreaseA() {
        if(this.ResultSetting.percentageA>0){
          this.ResultSetting.percentageA -= 10;
          if(this.ResultSetting.percentageC>=100){
              this.ResultSetting.percentageB+=10
          }else{
            this.ResultSetting.percentageC+=10
          }
          this.option.series[0].data[0].value = this.ResultSetting.percentageA
          this.option.series[0].data[1].value = this.ResultSetting.percentageB
          this.option.series[0].data[2].value = this.ResultSetting.percentageC
          this.initChart();
        }
      },
      increaseB() {
        if(this.ResultSetting.percentageB<100){
          this.ResultSetting.percentageB += 10;
          if(this.ResultSetting.percentageC<=0){
                this.ResultSetting.percentageA-=10
            }else{
              this.ResultSetting.percentageC-=10
            }
            this.option.series[0].data[0].value = this.ResultSetting.percentageA
            this.option.series[0].data[1].value = this.ResultSetting.percentageB
            this.option.series[0].data[2].value = this.ResultSetting.percentageC
            this.initChart();
        }
      },
      decreaseB() {
         if(this.ResultSetting.percentageB>0){
          this.ResultSetting.percentageB -= 10;
          if(this.ResultSetting.percentageC>=100){
              this.ResultSetting.percentageA+=10
          }else{
            this.ResultSetting.percentageC+=10
          }
          this.option.series[0].data[0].value = this.ResultSetting.percentageA
          this.option.series[0].data[1].value = this.ResultSetting.percentageB
          this.option.series[0].data[2].value = this.ResultSetting.percentageC
          this.initChart();
        }
      },
    async getUserList() {
      let res = await getUserList(this.param)
      this.userList = res.beans
      this.total = res.bean.total
    },
    async getResultSetting() {
      let res = await getResultSetting()
      this.ResultSetting.percentageA = res.bean.peacetimeResult
      this.ResultSetting.percentageB = res.bean.centreResult
      this.ResultSetting.percentageC = res.bean.finalResult
      this.option.series[0].data[0].value = this.ResultSetting.percentageA
      this.option.series[0].data[1].value = this.ResultSetting.percentageB
      this.option.series[0].data[2].value = this.ResultSetting.percentageC
      this.initChart();
    },
    async editResultSetting() {
      await editResultSetting(this.ResultSetting).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })

        }
        ).catch(err => {
          this.$message({
            type: 'error',
            message: '修改失败!'
          })
        })
      
    },
    async editReport(str){
      this.dialogVisible = true
      this.reportParams.fileUrl=''
      if(str==='week'){
        this.reportParams.reportType = 0
        this.reportTiele = '请上传新的周报模板'
      }else if(str==='month'){
        this.reportParams.reportType = 1
        this.reportTiele = '请上传新的月报模板'
      }else if(str==='center'){
        this.reportParams.reportType = 2
        this.reportTiele = '请上传新的中期报告模板'
      }else if(str==='final'){
        this.reportParams.reportType = 3
        this.reportTiele = '请上传新的实训报告模板'
      }
    },
    handleAvatarSuccess(res, file) {
        this.reportParams.fileUrl = res.bean.url
      },
      handleRemove(file, fileList) {
        this.reportParams.fileUrl=''
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传文档大小不能超过 2MB!');
        }
        return  isLt2M;
      },
      async editReportTemplate() {
        await editReportTemplate(this.reportParams).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.dialogVisible = false
          this.getReportTemplate()
        }
        ).catch(err => {
          this.$message({
            type: 'error',
            message: '修改失败!'
          })
        })
      
    },
    async getReportTemplate() {
        let res = await getReportTemplate()
        this.reportTemplate = res.bean
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
